`Moving around age verification box with javascript`

I'm currently working on an Age Verification Splash page, but I'm feeling a bit lost.

My script is set up to redirect users to Google if they are under 18, and to the main site if they are 18 or older.

This is my first time dealing with splash pages, so I'm not sure if it references my CSS file. Do I need to add any CSS directly in the code? Any help would be greatly appreciated, thank you!

The website in question is Vaporwrx.com. Currently, the page is all white with the 'box' situated in the top left corner. I need to move the box to the center and change the background color or add an image. Here is the snippet of code I am working with:

    <head>

    <script language="javascript">
    function checkAge()
    {
    /* The minimum age that is permitted */
    var min_age = 18;

    /* Change "age_form" to match your form's name attribute */
    var year = parseInt(document.forms["age_form"]["year"].value);
    var month = parseInt(document.forms["age_form"]["month"].value) - 1;
    var day = parseInt(document.forms["age_form"]["day"].value);

    var theirDate = new Date((year + min_age), month, day);
    var today = new Date();

    if ((today.getTime() - theirDate.getTime()) < 0) {

    window.location.href = "http://www.google.com/";

    return false;
    }
    else {
    /* Set the age check cookie here for accessibility on all pages */
    return true;
    }
    }
    </script>

    **** PLEASE ENTER YOUR BIRTHDAY ****

    <form action="http://www.vaporwrx.com/default.asp" method="post" name="age_form">
    Day: <select name="day">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </select>

    Month: <select name="month">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </select>

    Year : <select name="year">
     <option>2013</option>
    <option>2012</option>
    <option>2011</option>
    <option>2010</option>
    </select>

    <input type="submit" name="senddate" value="Go" onClick="return checkAge()"> 
    </head>

Answer №1

Make sure to include this code snippet before creating your form:

<link rel=StyleSheet href="../css/reports.css" type="text/css" media=screen>

Enclose your form within a div element...

<div id="age_form">  <!--form content --> </div>

Next, add the following styles in your CSS file:

#age_form
{
    margin-left: auto; 
    margin-right: auto; 
    background-color:#00ff00;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error occurs when loading page due to issue with Django's javascript translation

Here is the structure of my urls.py: js_info_dict = { 'domain': 'djangojs', 'packages': ('project',), } urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^', include(' ...

Continuously receiving unhandled promise rejection errors despite implementing a try-catch block

Every time I run my code, I encounter the following issue: An UnhandledPromiseRejectionWarning is being thrown, indicating that a promise rejection was not properly handled. This can happen if you throw an error inside an async function without a catch bl ...

Guide to implementing nested conditions to reveal a hidden block with AngularJS

I need help setting up conditions to display a hidden div. I want the hidden block to appear only after entering a value in the 'name' textbox and clicking on the search link. Currently, the hidden div appears even if the search link is clicked b ...

The clash between two JavaScript codes causes a programming dilemma

I encountered a problem with my webpage where only one of the two JavaScript libraries I installed seems to work properly. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> ...

Will the bootstrap carousel continue running in the background even if I hide it?

Currently, I have incorporated the twitter bootstrap carousel into my website with the following code: <div id="slider" class="carousel slide"> <!-- Wrapper for slides --> <div class="caro ...

Eliminating the "as" keywords from the TypeScript code

I'm looking to optimize this TypeScript code by removing the unnecessary as keywords. The code includes a method called update where I'm attempting to improve the organization of sanitizing, validating, and attributing data. However, it seems tha ...

Vuetify: the item-text attribute causing issues with v-combobox

As I embark on my journey with Vue.js and Vuetify, I've encountered a simple issue with the v-combobox component that has me stumped: Picture this scenario: I want a combobox that offers three distinct options. The code snippet below functions perfec ...

The Dropdown Button Functions Once and Then Stops

I am facing a challenge in implementing a button within an HTML table that triggers a dropdown menu when clicked, and closes upon another click or when the user clicks outside the menu. Oddly, the button only seems to work once before completely losing fun ...

What is causing my css elements to appear larger compared to other instances?

As someone who is not a designer, I find myself doing a lot of cutting and pasting for my side hustles. I believe many others can relate to this experience. Currently, I am working on a personal project that involves using tailwindcss, appwrite, and svelte ...

Moving objects from one container to another and organizing them

I have multiple small divs (referred to as "inner-div") and several container divs. My goal is to be able to drag the inner-divs to different container-divs and have them automatically rearrange within the new container. I have already set up the divs an ...

Differences in file loading in Node.js: comparing the use of .load versus command-line

Currently, I am in the process of developing a basic server using vanilla JavaScript and Node.js. For this purpose, I have created a file named database.js, which includes abstractions for database interactions (specifically with redis). One of my objecti ...

Is it possible for JavaScript within an <iframe> to access the parent DOM when

Is it possible for javascript in an iframe from a different domain to modify the parent's DOM? I need my iframed script to add new html elements to the parent page - any suggestions? Edit: One potential solution is using "Fragment ID Messaging" to co ...

The image is not correctly aligned in the center within the anchor element

In the process of working on my Angular project, I have encountered an issue with displaying components as items. Here is a snippet of the component code: <a href="" class="list-group-item clearfix" > <div class="container-fluid"> <div class ...

Inconsistent performance: Twitter Bootstrap navigation functions flawlessly on desktop but encounters issues on

I have been using the collapsing navigation menu from Twitter Bootstrap for my website as shown in this demo: While it works perfectly fine on desktop browsers when I resize the window, it doesn't seem to work on my mobile device (iPhone 4s). The Bo ...

Exploring the realms of development and production with Next JS and Vercel

I've recently developed a movie database application using Next JS to explore its functionality. This app allows users to create, read, update, and delete data in Firebase by utilizing the API endpoints provided by NextJS. While the app works smoothl ...

Is the PHP variable receiving a null value by the conclusion of the script?

I'm facing a puzzling issue that I just can't crack. Currently, I'm in the process of developing a blog and I've encountered an anomaly with a cookie-generated variable that holds a post ID. Strangely, when I reach the if(isset) stateme ...

Having trouble accessing JSON response properties within an Angular.js controller

My Angular.js controller is called 'forecastController'. This is the code for the Angular.js Controller: weatherApp.controller('forecastController', ['$scope','$routeParams','cityService', 'weat ...

Managing the response from a variable returned by jQuery's .load method

I am facing an issue with my code. I am using jQuery post to validate whether the name of the filter is available for use. $.post('check-username.php', $("#myform").serialize(), function(data) { alert(data); }); When I use the alert to disp ...

Emotion (Mui) in Next.js project does not properly apply inline stylesheets in Chrome

Having trouble applying classes from Inline stylesheets generated by emotion(MUI) in the latest Chrome version (v129). The issue is only present in this specific version of Chrome, as it works fine in other browsers and even in Chrome versions <=128. I ...

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...