ibrahimBanat/main.html

## main.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 01b</title>
    <style>
        .heading {
            text-align: center;
            background-color:blueviolet;
            color: red;
        }

    </style>

</head>
<body>

<!-- html doc should have <body> with <header>, <main>, and <footer> elements. -->
<!-- In the <main> of the file, place a <h1> tag with the content “Class 1 Lab”. Style this element with text and background colors via an internal <style> element placed in the <head> of your document. -->
<!-- In the HTML portion of the file, place the four questions within a series of <p> tags so that they are listed on the screen. -->
<!-- Give each <p> tag a different text color and background color by using inline styling. -->

    <header></header>
    <main>
        <h1 class="heading">Class 1 Lab</h1>
        <div id="user__content">
            <p
            style="text-align:center; background-color: #D4F1F4; font-size: 32px; color: #59981A; height: 5rem; padding: 15px;">what is your name?: <span id="name"></span></p>
            <p
            style="text-align:center; background-color: #75E6DA; font-size: 32px; color: #ECF87F; height: 5rem; padding: 15px;">what is your age?: <span id="age"></span></p>
            <p
            style="text-align:center; background-color: #189AB4; font-size: 32px; color: #81B622; height: 5rem; padding: 15px;">what is your favorite drink?: <span id="fav"></span></p>
            <p
            style="text-align:center; background-color: #05445E; font-size: 32px; color: #3D550C; height: 5rem; padding: 15px;">what is your gender? use just male/female: <span id="gender"></span></p>
        </div>
    </main>
    <footer></footer>
</body>

<script>
    //TO DO
    //accepts user input and, based on that input, displays messages back to the user.
    // use 4 js prompts with 4 question.
    // response in seperated var's(use let ot declare var)
    // dipslay the user inputs back to the user using alert
    // each input should have it's own alert
    // create console.log for each user input

    function alerting(userResponse) {
        alert(userResponse);
    };

    function consoling(params) {
        console.log(params);
    };

    function answer(name, age, fav, gender) {
        document.getElementById('name').textContent = `${name}`;
        document.getElementById('age').textContent = `${age}`;
        document.getElementById('fav').textContent = `${fav}`;
        document.getElementById('gender').textContent = `${gender}`;


    };

    let name = prompt("what is your name?");
    consoling('asking user for his name ==> ' + name);
    alerting('Welcome ' + name);

    let age = prompt("what is your age?");
    consoling('asking user for his age ==> ' + age);
    alerting(age + ' years');

    let fav = prompt("what is your favorite drink?");
    consoling('asking user for his favorite drink ==> ' + fav);
    alerting(fav + '! ' + 'Tasty');

    let gender = prompt("what is your gender? use just male/female");
    consoling('asking user for his gender');
    while (gender !='male' && gender !='female') {
        gender = prompt("what is your gender? use just male/female");
    };
    let result = (gender=="male") ? "👨‍🦱":"👸";
    consoling('asking user for his name ==> ' + name);
    alerting(gender + result);

    answer(name, age, fav, gender);


</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Lab 01b</title>
	<style>
	.heading {
	text-align: center;
	background-color:blueviolet;
	color: red;
	}

	</style>

	</head>
	<body>

	<!-- html doc should have <body> with <header>, <main>, and <footer> elements. -->
	<!-- In the <main> of the file, place a <h1> tag with the content “Class 1 Lab”. Style this element with text and background colors via an internal <style> element placed in the <head> of your document. -->
	<!-- In the HTML portion of the file, place the four questions within a series of <p> tags so that they are listed on the screen. -->
	<!-- Give each <p> tag a different text color and background color by using inline styling. -->

	<header></header>
	<main>
	<h1 class="heading">Class 1 Lab</h1>
	<div id="user__content">
	<p
	style="text-align:center; background-color: #D4F1F4; font-size: 32px; color: #59981A; height: 5rem; padding: 15px;">what is your name?: <span id="name"></span></p>
	<p
	style="text-align:center; background-color: #75E6DA; font-size: 32px; color: #ECF87F; height: 5rem; padding: 15px;">what is your age?: <span id="age"></span></p>
	<p
	style="text-align:center; background-color: #189AB4; font-size: 32px; color: #81B622; height: 5rem; padding: 15px;">what is your favorite drink?: <span id="fav"></span></p>
	<p
	style="text-align:center; background-color: #05445E; font-size: 32px; color: #3D550C; height: 5rem; padding: 15px;">what is your gender? use just male/female: <span id="gender"></span></p>
	</div>
	</main>
	<footer></footer>
	</body>

	<script>
	//TO DO
	//accepts user input and, based on that input, displays messages back to the user.
	// use 4 js prompts with 4 question.
	// response in seperated var's(use let ot declare var)
	// dipslay the user inputs back to the user using alert
	// each input should have it's own alert
	// create console.log for each user input

	function alerting(userResponse) {
	alert(userResponse);
	};

	function consoling(params) {
	console.log(params);
	};

	function answer(name, age, fav, gender) {
	document.getElementById('name').textContent = `${name}`;
	document.getElementById('age').textContent = `${age}`;
	document.getElementById('fav').textContent = `${fav}`;
	document.getElementById('gender').textContent = `${gender}`;




	};

	let name = prompt("what is your name?");
	consoling('asking user for his name ==> ' + name);
	alerting('Welcome ' + name);

	let age = prompt("what is your age?");
	consoling('asking user for his age ==> ' + age);
	alerting(age + ' years');

	let fav = prompt("what is your favorite drink?");
	consoling('asking user for his favorite drink ==> ' + fav);
	alerting(fav + '! ' + 'Tasty');

	let gender = prompt("what is your gender? use just male/female");
	consoling('asking user for his gender');
	while (gender !='male' && gender !='female') {
	gender = prompt("what is your gender? use just male/female");
	};
	let result = (gender=="male") ? "👨‍🦱":"👸";
	consoling('asking user for his name ==> ' + name);
	alerting(gender + result);

	answer(name, age, fav, gender);



	</script>
	</html>