Question

In: Computer Science

You are designing a web page that allows users to create an event listing. The event...

You are designing a web page that allows users to create an event listing.
The event listing should include the date, time, location, title, phone,
email, coordinator, and description of the event.
The location should be between 10 and 100 characters long.
The title should be between 1 and 50 characters long.
The description should be between 10 and 200 characters long.
Phone number consists of numbers and dashes.
Email has to have an @ symbol.

All data elements should be entered by the user.

Create a form and use JavaScript to validate the user data.
Style your page!

Submitting valid data should result in a page that
displays the date, time, location, title and description.
Use HTML5 Local Storage to copy data across client pages.

Solutions

Expert Solution

This task focusses mainly on HTML% concepts such as localstorage like how to store the data to local storage and ho to retriev data fro local storage .

Also how we can use the data across pages when we store the data in local storage:

The code is self explanatory. given comments wherever required. so i am providing th all the files like html js and css for this task

event-create.html: Here we can create the events by filling the form. here all the user input is validated according to the given rules.

===============================================

event-create.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Event Planner !</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <header>

        <div class="container">

            <h1>Event Planner</h1>

        </div>

    </header>

    <div class="main">

        <div class="container">

            <h3>Plan Your Event</h3>

            <form id="eventform">

                <div class="form-control">

                    <label for="title">Event Title</label>

                    <input type="text" id="title">

                </div>

                <div class="form-control">

                    <label for="location">Location</label>

                    <input type="text" id="location">

                </div>

                <div class="form-control">

                    <label for="date">Date</label>

                    <input type="date" id="date">

                </div>

                <div class="form-control">

                    <label for="time">When</label>

                    <input type="time" id="time">

                </div>

                <div class="form-control">

                    <label for="email">Email</label>

                    <input type="email" id="email">

                </div>

                <div class="form-control">

                    <label for="phone">Phone</label>

                    <input type="text" id="phone">

                </div>

                <div class="form-control">

                    <label for="coordinator">Event Co-ordinator</label>

                    <input type="text" id="coordinator">

                </div>

                <div class="form-control">

                    <label for="description">Description</label>

                    <textarea id="description" cols="50" rows="4"></textarea>

                </div>

                <div class="form-control">

                    <input type="submit" class="btn" value="Create Event">

                </div>                

            </form>

            <p id="error"></p>

        </div>

    </div>

    <script src="app.js"></script>

</body>

</html>

====================================================

events.html: Once user fills the form with valid data he will be navigated to this page . here he can see the detailsof the evnt

==================================================evevents.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Event List</title>

    <link rel="stylesheet" href="styles.css">

    

</head>

<body onload="loadData()">

    <header>

        <div class="container">

            <h1>Event Planner</h1>

        </div>

    </header>

    <div class="container">

        <h3>Here are the event details</h3>

        <div class="eventdetails">

            <div class="keyvaluepair">

                <label for="">Event Title</label>

                <label for="" id="title"></label>

            </div>

            <div class="keyvaluepair">

                <label for="">Location</label>

                <label for="" id="loc"></label>

            </div>

            <div class="keyvaluepair">

                <label for="">Date</label>

                <label for="" id="date"></label>

            </div>

            <div class="keyvaluepair">

                <label for="">Time</label>

                <label for="" id="time"></label>

            </div>

            <div class="keyvaluepair">

                <label for="">Email</label>

                <label for="" id="email"></label>

            </div>

            <div class="keyvaluepair">

                <label for="">Phone</label>

                <label for="" id="phone"></label>

            </div>

            <div class="keyvaluepair">

                <label for="">Coordinator</label>

                <label for="" id="coordinator"></label>

            </div>

            <div class="keyvaluepair">

                <label for="">Description</label>

                <label for="" id="desc"></label>

            </div>

        </div>

    </div>

    <script>

        function loadData(){

            const event = JSON.parse(localStorage.getItem("eventdata"))

            document.getElementById('title').textContent = event.title;

            document.getElementById('loc').textContent = event.location;

            document.getElementById('date').textContent = event.date;

            document.getElementById('time').textContent = event.time;

            document.getElementById('email').textContent = event.email;

            document.getElementById('phone').textContent = event.phone;

            document.getElementById('coordinator').textContent = event.coordinator;

            document.getElementById('desc').textContent = event.description;   

        }

    </script>

</body>

</html>

===================================================

app.js: : here all the validations will be performed. also saving event details to local storage

===================================================

app.js

// const title = document.querySelector('#title');

// const location = document.querySelector('#location');

const phone = document.querySelector('#phone');

const description = document.querySelector('#description');

document.querySelector('#eventform').addEventListener('submit',(e)=>{

    e.preventDefault();

    const formEl = e.target;

    const title = formEl.title.value;

    const location = formEl.location.value;

    const date = formEl.date.value;

    const time = formEl.time.value;

    const email = formEl.email.value;

    const phone = formEl.phone.value;

    const coordinator = formEl.coordinator.value;

    const description = formEl.description.value;

    // Validating the user input amd showing the errors

    let errorMsg = '';

    // title

    if(title.length<1 || title.length>50){

        errorMsg+='Please enter title between 1 to 50 chars'

    }

    // location

    if(location.length<10||location.length>100){

        errorMsg+='\n Location should be min 10 and max 100 chars only'

    }

    // description

    if(description.length<10||description.length>200){

        errorMsg+='\n Description should be between 10 and 200 chars'

    }

    // Phone numbers

    if(!phone.match("[0-9\-]+")){

        errorMsg+='\n Enter valid phone number';

    }

    // Email

    if(email.length==0){

        errorMsg+='\n Email is required';

    }

    if(errorMsg.length>0){

        document.querySelector('#error').textContent = errorMsg

    }else{

        const data = {

            title,

            location,

            date,

            time,

            email,

            phone,

            coordinator,

            description

        }

        localStorage.setItem('eventdata',JSON.stringify(data));

        window.location.href = "/events.html";

    }    

})

=================================================

styles.css

==================================================

/* css reset */

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

header{

    background: rgb(123, 204, 108);

    height: 70px;

}

header h1{

    padding: 20px 0;

    color: brown;

}

.container{

    max-width: 900px;

    margin: auto;

    padding-left: 20px;

}

.container h3{

    /* text-align: center; */

    margin-bottom: 30px;

}

.main{

    margin-top: 20px;

}

.form-control{

    display: flex;

    flex-direction: column;

    margin-bottom: 10px;

}

.form-control input{

    display: block;

    padding: 5px 2px;

}

.form-control input ,

.form-control textarea{

    width: 70%;

}

.btn{

    background: rgb(123, 204, 108);

    color: #f4f4f4;

    font-size: 20px;

}

#error{

    color: crimson;

}

.eventdetails{

    margin-top: 30px;

    font-size: 20px;

}

.keyvaluepair{

    display: grid;

    grid-template-columns: 30% auto;

    margin-bottom: 10px;

    margin-top: 5px;

}

.keyvaluepair label{

    margin-right: 20px;

}

===================================================

Below are the output screens for your reference

Please like if it helps

venereology answered 2 hours ago
Next > < Previous

Related Solutions

You are designing a web page that allows users to create an event listing. The event...
You are designing a web page that allows users to create an event listing. The event listing should include the date, time, location, title, phone, email, coordinator, and description of the event. The location should be between 10 and 100 characters long. The title should be between 1 and 50 characters long. The description should be between 10 and 200 characters long. Phone number consists of numbers and dashes. Email has to have an @ symbol. All data elements should...
Create a web page using PHP that allows the users to create an account (a username...
Create a web page using PHP that allows the users to create an account (a username and a password). There should be a login page that allows users to create an account by entering their preferred username and password. The same page should also let users login if they already have an account. If a user is logged in successfully , they should be able to enter a comment and also read the comments entered by others previously.
Choose a software system (or a web page) that you think will benefit the users if...
Choose a software system (or a web page) that you think will benefit the users if it employed the principles of direct manipulation. Illustrate some of the operations under the direct manipulation scheme
Web Projects If you are learning a web technology, you must create a new page that...
Web Projects If you are learning a web technology, you must create a new page that is web-accessible (use your individual burrow account) that includes a form with a field that allows the user to enter a number only. ● Create an input that allows a number to be entered. Only whole numbers should be allowed. ● Add a button below the input that says "Translate". ● When the button is clicked, it should grab the current number in the...
For this assignment you are required to create a web page displaying a recipe of your...
For this assignment you are required to create a web page displaying a recipe of your choosing. Your submission should appropriately use the basic head and body construction of an HTML document. Additionally you are required to appropriately use at least three different HTML element types. For example you might use an unordered list for your ingredients, an ordered list for the steps of your recipe, and an image to show the final result. If you choose to use an...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
In this assignment you will create a web page about your favorite sports to play or...
In this assignment you will create a web page about your favorite sports to play or teams to watch. If you don’t watch or play sports, please make up your favorite sports to play or teams to watch. You will be incorporating images into your web page, as well as other concepts learned in this unit. Create an external style sheet using a text editor of your choosing. In the CSS file add the following style rules: A background image...
1 -​Create the code to generate a default web page. The contents of this page should...
1 -​Create the code to generate a default web page. The contents of this page should be Your​​Name, right justified
3.32 Prog4-Branches-Listing names A university has a web page that displays the instructors for a course,...
3.32 Prog4-Branches-Listing names A university has a web page that displays the instructors for a course, using the following algorithm: If only one instructor exists, the instructor's first initial and last name are listed. If two instructors exist, only their last names are listed, separated by /. If three exist, only the first two are listed, with "/ …" following the second. If none exist, print "TBD". Given six words representing three first and last names (each name a single...
Create a web page that contains a simple math test. The page should have the following...
Create a web page that contains a simple math test. The page should have the following arithmetic problems. Add a button under each problem which, when clicked, will display a prompt for the user to enter the answer. Add a swcond button which, when clicked, will check to see if the user's answer is correct. The output should be either "correct" or "incorrect" displayed in an alert box. 1. 5+9= 2. 4*6= 3. 25-14= 4. 48/3= 5. 26%6=
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT