P4-Y 4/25 Guide to SASS
An guide on how to use SASS to build a more customized frontend.
- Classwork:
- Hacks - Insert any screenshots, code segments, etc. that you need to in order to demonstrate an understanding of the hacks
Classwork:
What are 5 Basic UI Elements?:
- Color
- Font
- Layout
- Icons
- Interactivity
- Bonus. Accessibility
In your own words, explain what SASS does:
- SASS is an addition to css that reduces the complex of the code and allows you to create your own style.
What are some benefits to SASS?:
- Some benefits of SASS is that it has many usable variables, more build in functions, and can easly convert the code to the normal CSS. The build in functions and features are also easy to understand and use for formating a page.
Describe/Explain one of the more "advanced" SASS properties below in detail:
-
One of the more advanced SASS properties is @keyframes fade-in {}. This properties allows a programmer to display an images, gif, or video by first fading that object in. animation-delay: Ns; also sets the fade in of the object to a certain speed.
-
.grid-container is another advanced SASS property that uses the lines grid-item-N {} to format an object in a grid.
-
@import is used to pull different types of themes for you to use for yuor own webpages.
Link to Number Guesser Game
How does the number guesser game work?
- The number guesser game works by first using math.random to get a number that is from 1 to 100. Then it checks to see if each guess by the user is that number using the function checkguess. If not, the code with display too high or too low until the user gets it right. Once the right number is clicked, the game ends and displays the number of attempts taken.
Explain how SASS can be used to make the number guesser game look more visually appealing?
- SASS can make the number guesser game look more visually appealing by using variables to define colors or rgb values. You can also use JavaScript to change the formating of a page or game with the SASS features.
---
layout: home
search_exclude: true
image: images/logo.png
---
<head>
<style>
:root {
--primary-color: #800080;
--secondary-color: #2907bf;
--aqua-color: #7fffd4;
--text-color: #010101;
}
body {
background-color: var(--secondary-color);
color: var(--text-color);
font-family: 'Comic Sans MS';
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h4 {
padding: 1rem;
border: 1px solid black;
border-radius: 1rem;
font-size: 2rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 5);
margin-block-end: 0em;
}
h5 {
padding: 1rem;
border: 1px solid black;
border-radius: 1rem;
font-size: 2rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 5);
}
</style>
<body>
<h4><center>This website was created with <a href="https://github.com/fastai/fastpages">fastpages</a> and is used by Lucas at <a href="https://www.powayusd.com/en-US/Schools/HS/DNHS/Home">Del Norte High School</a>.</center><h4>
<center><img src="/Q-tip/images/Screenshot of cat typing 2022-08-26.png" height="auto" width="auto"></center>
<h5><center>Partners: Aniket Team: Aniket, Soham, Ryan</center></h5>
<!--
# Posts -->
---
title: Theme Changer
layout: default
permalink: /themechanger/
type: pbl
---
# <center>Theme Changer</center>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../assets/css/fastpages-styles.css" id="default-theme-link">
<link rel="stylesheet" href="../assets/css/dark-mode1.css" id="dark-theme-link">
<link rel="stylesheet" href="../assets/css/other-style.css" id="other-theme-link" disabled>
</head>
<body>
<center><button id="default-theme-toggle">Default Theme</button></center>
<center><button id="dark-theme-toggle">Dark Theme</button></center>
<center><button id="other-theme-toggle">Other Theme </button></center>
<script>
const defaultToggleButton = document.querySelector('#default-theme-toggle');
const darkToggleButton = document.querySelector('#dark-theme-toggle');
const otherToggleButton = document.querySelector('#other-theme-toggle');
const anotherToggleButton = document.querySelector('#another-theme-toggle');
const defaultThemeLink = document.querySelector('#default-theme-link');
const darkThemeLink = document.querySelector('#dark-theme-link');
const otherThemeLink = document.querySelector('#other-theme-link');
const anotherThemeLink = document.querySelector('#another-theme-link');
defaultToggleButton.addEventListener('click', () => {
defaultThemeLink.disabled = false;
darkThemeLink.disabled = true;
otherThemeLink.disabled = true;
anotherThemeLink.disabled = true;
});
darkToggleButton.addEventListener('click', () => {
defaultThemeLink.disabled = true;
darkThemeLink.disabled = false;
otherThemeLink.disabled = true;
anotherThemeLink.disabled = true;
});
otherToggleButton.addEventListener('click', () => {
defaultThemeLink.disabled = true;
darkThemeLink.disabled = true;
otherThemeLink.disabled = false;
anotherThemeLink.disabled = true;
});
anotherToggleButton.addEventListener('click', () => {
defaultThemeLink.disabled = true;
darkThemeLink.disabled = true;
otherThemeLink.disabled = true;
anotherThemeLink.disabled = false;
});
</script>
</body>
</html>
<html>
<head>
<title>Guess the Number</title>
<style>
:root {
--primary-color: #800080;
--secondary-color: #0000FF;
--aqua-color: #7fffd4;
--text-color: #800080;
}
body {
background-color: var(--secondary-color);
color: var(--text-color);
font-family: 'Comic Sans MS';
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90vh;
}
h1 {
color: var(--primary-color);
font-size: 6rem;
text-align: center;
margin-top: 0rem;
margin-block-end: 0em;
}
p {
margin: 1rem 0;
margin-block-start: 0em;
margin-block-end: 1em;
font-size: 2rem;
}
input[type="text"], button {
width: 100%;
max-width: 25rem;
margin-bottom: .5rem;
}
input[type="text"] {
padding: 1rem;
border: 1px solid black;
border-radius: 1rem;
font-size: 1.2rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 5);
}
button {
background-color: var(--primary-color);
color: #c0c0c0;
border: 1px solid black;
border-radius: 5rem;
padding: 1rem 1rem;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 5);
}
button:hover {
background-color: var(--aqua-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 5);
}
#result {
font-size: 1.2rem;
font-weight: bold;
text-align: center;
margin-top: 2rem;
}
#home-button {
position: absolute;
top: 0;
left: 0;
margin: 1rem;
padding: 0.5rem 1rem;
background-color: var(--primary-color);
color: #c0c0c0;
border: 1px solid black;;
border-radius: 0.5rem;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 5);
}
#home-button:hover {
background-color: var(--aqua-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 5);
}
</style>
</head>
<body>
<button id="home-button" onclick="goHome()">Home</button>
<h1>Guess the Number</h1>
<p>Try to guess the number between 1 and 100.</p>
<input type="text" id="guess" placeholder="Enter your guess">
<button onclick="checkGuess()">Submit</button>
<p id="result"></p>
<script>
const randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
function checkGuess() {
const guess = parseInt(document.getElementById("guess").value);
attempts++;
if (guess === randomNumber) {
document.getElementById("result").innerHTML = `Congratulations! You guessed the number in ${attempts} attempts.`;
} else if (guess < randomNumber) {
document.getElementById("result").innerHTML = "Too low. Guess again.";
} else {
document.getElementById("result").innerHTML ="Too high. Guess again.";
}
}
function goHome() {
window.location.href = "https://q-tipwithaface.github.io/Q-tip/";
}
</script>