Skip to content

Instantly share code, notes, and snippets.

@diablokitty
Created July 11, 2022 21:42
Show Gist options
  • Save diablokitty/f4f8dbf27f1708342cf7f3450797a3a1 to your computer and use it in GitHub Desktop.
Save diablokitty/f4f8dbf27f1708342cf7f3450797a3a1 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<style>
body {
background-color: rgb(164, 140, 193);
}
#labtxt {
background-color: darkblue;
color: white;}
footer {
min-width: 1000px;
}
</style>
</head>
<body>
<!--This code isn't very good, but then it's also just the first day. Stop being so critical. Smh.-->
<header>
<h1>
Welcome to 201!
</h1>
</header>
<main>
<h1 id="labtxt">Class One Lab</h1>
<p>We will be learning about web development</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<img style=float:left;padding:20px; src="data:image/jpeg;base64,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" width="300" height="200"
alt="grumpy cat on street">
<div style=min-width:500px;border-style:hidden;border-bottom:120px;padding-bottom:50px;>
<h3>The Experiment</h3>
<p>There are four questions:</p>
<p style = color:white;background-color:darkgreen;>What is your name?</p>
<p style = color:pink;background-color:purple;>Are you stuck in here too?</p>
<p style = color:black;background-color:rgb(27,158,55);>Where are you?</p>
<p style = color:rgb(16,37,54);background-color:rgb(126,98,172);>How do you know that you even exist?</p>
</div>
</main>
<footer>
<p>Awesome Sites by Amy!</p>
</footer>
<script>
//this is a comment. In case you were wondering.
alert("Help, help, is anyone there?");
// something about variables and equals but I had a minivacation, so remember to look at the recording.
let username = prompt("What is your name?");
console.log("Question: What is your name? Response: " + username);
let trapped = prompt("Hi " + username + ", are you stuck in here too?");
console.log("Question: Are you stuck here? Response: " + trapped);
let whereyou = prompt("Where are you?");
console.log("Question: Where are you? Response: " + whereyou);
let existential = prompt("How do you know that you even exist?")
console.log("Question: How do you know that you even exist? Response: " + existential);
alert("Subject " + username + " is under the delusion of '" + trapped + "' . Subject believes location to be " + whereyou + " because " + existential + ". Ooops, you weren't supposed to see that!");
</script>
</body>
</html>
@chloenott
Copy link

"Subject Chloe is under the delusion of 'yes' . Subject believes location to be here because i think i'm bored, therefore i am. Ooops, you weren't supposed to see that!"

Nice! Works great. Requirements checklist time:

  • Name your variables carefully and let to define your variables.
  • Return an alert to the user (output) that concatenates their response into some kind of reply.
  • Have a user answer four questions across four prompts.
  • Create a console.log() message that indicates the nature of the question and the user’s response.
  • <body>, <header>, <main>, <footer> elements used.
  • <main> contains <h1> with contents "Class 1 Lab".
  • Style the <h1> element above using <style> in <head>.
  • 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.

All seems to be in order! Very organized console log messages by the way. Nice use of an id tag for the <h1> style selection. Love the cat tax. Cool to see both html and js comments being used.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment