* After the user enters the phone number, pop up a Good Luck alert message > use onblur and name your function goodLuck() * Add an empty paragraph just below the name field. After the user enters the name, populate the new paragraph with the text "Have we met before, ?" • Add an empty paragraph just below the select field. After selecting a favorite dish, change the background color of the select paragraph and the new paragraph to a new color, and add text to the new paragraph that says "Good choice". • Add an empty paragraph just below the restaurant rating field. When the user selects 5 or below, add text to the new paragraph that says "Are you sure?"; when the user selects 6 or above, use the text "Great". Optional: Provide a different message for each number rating. • When the user clicks Reset, show an alert that says “Get it right this time!" and change the background of the page to a bright color. * Add an empty paragraph just below the Submit button area. When the user clicks Submit, first check that the phone number is not empty. If it is empty, add text to the paragraph that says "Tricked you-phone number is required!" and prevent the submission. The text should be in red color, with a gray background for the paragraph. If the phone field is NOT empty, then add text to the paragraph that says "Thanks--can I call you tomorrow?". You choose the colors for this one, but make it different than the red and gray
NEED HELP WITH THE JAVASCRIPT PORTION
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Donta's Food Fusion</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/fusionStyles.css" />
</head>
<body>
<header class="headerfooter col-sm-12">
<img src="images/logo.jpg" alt="Restaurant Logo" />
<h1> Help Us Serve You Better </h1>
</header>
<br>
<div class="row">
<nav class="col-sm-12">
<ul class="row">
<li class="col-sm-1"><a href="index.html"> HomePage </a></li>
<li class="col-sm-1"><a href="about.html"> About Us </a></li>
<li class="col-sm-1"><a href="breakfast.html"> Breakfast </a></li>
<li class="col-sm-1"><a href="lunch.html"> Lunch </a></li>
<li class="col-sm-1"><a href="dinner.html"> Dinner </a></li>
<li class="col-sm-1"><a href="extras.html"> Apps & Extras </a></li>
<li class="col-sm-1"><a href="locations.html"> Locations </a></li>
<li class="col-sm-1"><a href="contact.html"> Contact Us </a></li>
<li class="col-sm-1"><a href="events.html"> Special Events </a></li>
<li class="col-sm-1"><a href="order.html"> Online Orders </a></li>
</ul>
</nav>
</div>
<div>
<form method="get" action="#">
<fieldset>
<legend> Customer Feedback</legend>
<p>
<label for="phone"> Phone number: </label>
<input type="tel" name="phone" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"/>
</p>
<p>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" required><br>
</p>
<label for="cars">Favorite Dish :</label>
<select name="Favorite Dish" id="food">
<option value="dish 1">Steak & Eggs</option>
<option value="dish 2">BBQ Brisket Sandwich</option>
<option value="dish 3">Chicken Wings</option>
<option value="dish 4">Ribs PLatter</option>
<option value="dish 5">Filet Mignon</option>
<option value="dish 6">Alfredo</option>
<option value="dish 7">Smokepit Fries</option>
<option value="dish 8">Smokepit Cocktail</option>
</select>
<p>
<label for="rate"> Restaurant Rating (between 0 and 10):</label>
<input type="range" id="rate" name="rate" min="0" max="10">
</p>
<p>
<label for="review">Comments:</label>
<textarea id="review" name="review" rows="4" cols="50">
</textarea>
</p>
<p>
<label for="date">Date Visited:</label>
<input type="date" id="date" name="date">
</p>
<p>
<input type="radio" id="day" name="day" value="day">
<label for="date">Midday</label><br>
<input type="radio" id="day" name="day" value="day">
<label for="date">Afternoon</label><br>
<input type="radio" id="day" name="day" value="day">
<label for="day">Evening</label>
</p>
<p>
<input type="checkbox" id="publish" name="publish" value="publish">
<label for="publish">Yes, I give permisson to publish </label><br>
</p>
<p>
<input type="submit" class="btn btn-primary" value="Submit ">
<input type="reset" class="btn btn-info" value="Reset">
</form>
</div>
<br>
<div>
</div>
<br>
<div>
</div>
<footer class="headerfooter col-sm-12">
<ul>
<li><a href="survey.html"> Help Us Serve You Better </a></li>
<li><a href="employment.html"> Job Opportunities </a></li>
<p> Donta Shelton © 2022 </p>
</footer>
<script type="text/JavaScript" src="scripts/fusionStyles.js" > </script>
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 3 steps
