Skip to content

Commit

Permalink
new organization with data, business, presentation b00tc4mp#167
Browse files Browse the repository at this point in the history
  • Loading branch information
@annagonzalez9
annagonzalez9 committed Oct 8, 2024
1 parent 3df6f11 commit df2d1d5
Show file tree
Hide file tree
Showing 5 changed files with 1,235 additions and 0 deletions.
Empty file added staff/anna-gonzalez/unsocial.1/.gitkeep
View file
Empty file.
279 changes: 279 additions & 0 deletions staff/anna-gonzalez/unsocial.1/index.1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,279 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unsocial</title>
<link rel="shortcut icon" href="https://static-00.iconduck.com/assets.00/blank-yellow-icon-2048x2048-lzfypkl4.png"
type="image/x-icon"> <!--ICON OF THE PAGE-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Press+Start+2P&display=swap');

:root {
--color: lavender;
--font: 'Montserrat';
letter-spacing: 1px;
font-family: var(--font);
}

body {
font-size: 80%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: center;
background-color: black;
color: var(--color);
}

h1 {
font-size: 450%;
font-family: 'Press Start 2P';
margin-bottom: 80px;
}

input {
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
align-items: center;
border: 0px;
margin-top: 2%;
margin-bottom: 10%;
background-color: var(--color);
width: 200px;
/* it's the same than font-family: inherit
for the input and buttons we always need to change the default font */
}

a:visited,
h1 {
color: yellow;
}

.counterBox {
margin-top: 20px;
background-color: yellow;
color: black;
}

button {
font-family: 'Press Start 2P';
font-size: 120%;
margin-top: 80px;
margin-bottom: 15px;
background: blue;
color: var(--color);
padding: 10px 20px;
border-radius: 5px;
border: 0px;
cursor: pointer;
}
</style>
</head>

<body>
<h1>Unsocial</h1>

<section> <!--LOGIN SECTION-->
<h2>Login</h2>

<form>
<label for="username">Username</label>
<input type="text" id="username" />

<label for="password">Password</label>
<input type="password" id="password" />

<button type="submit">Login</button>
</form>

<a href="">Register</a>
</section>

<section> <!--REGISTER SECTION-->
<h2>Register</h2>

<form>
<label for="name">Name</label>
<input type="text" id="name" />

<label for="email">E-mail</label>
<input type="email" id="email" />

<label for="username">Username</label>
<input type="text" id="username" />

<label for="password">Password</label>
<input type="password" id="password" />

<button type="submit">Register</button>
</form>

<a href="">Login</a>
</section>

<section> <!--HOME SECTION-->
<h2>Home</h2>

<h3>Hello, User!</h3>

<div class="counter">
<p>How unsocial do you feel today?</p>
<button class="counterBox">-</button>
<button class="counterBox">+</button>
<p id="counter">0</p>
</div>
<button>Logout</button>
</section>

<script>
//-------------------------------CREATE AN ARRAY TO REGISTER ALL USERS && CREATE LOGGEDIN USER VARIABLE-------------------------------
var users = [
{ name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
{ name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
]

var loggedInUser = null //using find

//-------------------------------TURN OFF REGISTER && HOME WHEN WE OPEN THE APP-------------------------------
var sections = document.querySelectorAll('section')

var loginSection = sections[0]
//loginSection.style.display = 'none'

var registerSection = sections[1]
registerSection.style.display = 'none'

var homeSection = sections[2]
homeSection.style.display = 'none'

//-------------------------------TURN OFF LOGIN && HOME WHEN WE GO TO REGISTER-------------------------------
var anchors = document.querySelectorAll('a')

var registerAnchor = anchors[0]
//long way: registerAnchor.addEventListener('click', function (event) {
registerAnchor.onclick = function (event) {
event.preventDefault()

loginSection.style.display = 'none'
registerSection.style.display = ''
}

//-------------------------------TURN OFF REGISTER && HOME WHEN WE GO BACK TO LOGIN-------------------------------
var loginAnchor = anchors[1]
loginAnchor.onclick = function (event) {
event.preventDefault()

registerSection.style.display = 'none'
loginSection.style.display = ''
}

//-------------------------------COLLECTION OF REGISTER FORM DATA-------------------------------
var forms = document.querySelectorAll('form')

var registerForm = forms[1]
registerForm.onsubmit = function (event) {
event.preventDefault()

var inputs = registerForm.querySelectorAll('input')

var nameInput = inputs[0]
var name = nameInput.value

var emailInput = inputs[1]
var email = emailInput.value

var usernameInput = inputs[2]
var username = usernameInput.value

var passwordInput = inputs[3]
var password = passwordInput.value

var user = { name: name, email: email, username: username, password: password }
//users[users.length] = user
users.push(user)

registerForm.reset()

registerSection.style.display = 'none'
loginSection.style.display = ''
}

//-------------------------------EXERCISE: ADD USER TO LOGGEDIN USER & TURN ON HOME & PERSONALIZE HELLO & ALERT-------------------------------
var loginForm = forms[0]
loginForm.onsubmit = function (event) {
event.preventDefault()

var inputs = loginForm.querySelectorAll('input')

var usernameInput = inputs[0]
username = usernameInput.value

var passwordInput = inputs[1]
password = passwordInput.value

/*
Look in users if there exists the user with this username and password
If it does, access to the home
Else, alert
Add a reset when we submit
[1] personalize welcome message with the name of the user in h3
[2] turn off login and turn on home
*/

loggedInUser = users.find(function (user) {
return username === user.username && password === user.password
})

if (loggedInUser) {
passwordInput.value = ''

loginSection.style.display = 'none'
homeSection.style.display = ''
var h3 = homeSection.querySelector('h3')
h3.innerText = "Hello " + loggedInUser.name + "!"
} else {
alert('Not today')
}
}

//-------------------------------EXERCISE: LOGOUT BUTTON BEHAVIOUR-------------------------------
var homeButtons = homeSection.querySelectorAll('button')
var logoutButton = homeButtons[2]
logoutButton.onclick = function (event) {
event.preventDefault()

loggedInUser = null

homeSection.style.display = 'none'
loginSection.style.display = ''
}

//-------------------------------EXERCISE: COUNTER IN THE HOME-------------------------------
var counter = 0
var counterDisplay = document.getElementById('counter')

var decreaseButton = homeButtons[0]
decreaseButton.onclick = function (event) {
event.preventDefault()

counter--
counterDisplay.innerText = counter
}

var increaseButton = homeButtons[1]
increaseButton.onclick = function (event) {
event.preventDefault()

counter++
counterDisplay.innerText = counter
}
</script>
</body>

</html>
Loading

0 comments on commit df2d1d5

Please sign in to comment.