Devin's Dev Diary - TheEvergreenStateCollege/upper-division-cs-23-24 GitHub Wiki
-- 3/12/24 --
Today I did some work on my project. Currently I am figuring out how to get the csv -> js -> html pipeline going.
body {
background-color: black;
background-image: url(../images/orange.jpeg);
background-size: cover;
}
.title {
left: 50%;
top: 15%;
-webkit-transform: translate(-50%,-20%);
transform: translate(-50%,-20%);
position: absolute;
color: rgb(190, 73, 0);
font-family: "TrattatelloManual", fantasy;
font-size: 80px;
}
.date {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color: white;
}
.date-center {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color: white;
}
.backdrop {
mix-blend-mode: multiply;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 50%;
height: 50%;
background-color: rgb(80, 80, 80);
opacity: 0.5;
}
.centered {
position: absolute;
left: 50%;
top: 30%;
text-align: center;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
font-size: 40px;
}
.backdrop-outline {
outline: 5px solid rgb(255, 119, 0);
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 50%;
height: 50%;
}
--6/16/24
I finished the calculator project, for Homework 02 of Front End. I'll catalogue my processes for ensuring that this HTML, CSS, and Javascript program works as intended.
First, I set up the actual calculator in html, setting up a div to be the 'container' for the calculator itself, giving it the class name "calculator", and then centering it to the middle of the page, vertically and horizontally. This was a bit harder than one might think, but a few searches later and I knew the attributes that I needed to set the values of in the CSS file, which I then linked to the HTML file.
This div was colored Navy blue, or perhaps Deep blue, although the CSS interpreter appears to consider it to just be blue, without any adjectives. Personally, when I think blue my mind gravitates towards a blue with a tiny bit of green in it, so as to make it look like the sky, but since this is a computer interpreting it, perhaps it goes for the more mathematically perfect answer. Maybe that type of blue is compressed more easily in the display? Food for thought!
Then, I set out to making the buttons. I created another div inside calculator, and set up flex attributes so that I could center its position in the middle of itself, that way I could put some padding between each button without having to do so many complex calculations. I wasn't sure at the time how to set all of the buttons up with class names and whatnot, so I decided to just give them all separate class names and copy and paste the style settings for each and every one, making sure to reposition each and every one of them as I duplicated them and their classes, and renamed both of them.
This included the division button, the one button, the two button, the three button, the four button, the five button, the six button, the seven button, the eight button, the nine button, the multiplication button, the addition button, the subtraction button, and especially the clear button and also the enter button, because they were twice as wide as all of the other buttons. Not to forget, it also included the backspace button, which I am including in this project, because it was not too much of an extra challenge, and I think a good calculator needs a backspace button.
After all of that, I was on to the actual Javascript section, and I was, in my opinion, already more than halfway there. My first move was to map all of the buttons to variables, but that didn't work, because it did not give the page the time for all of the divs to load in, so I was faced with a bunch of null errors later on. I then fixed that issue by wrapping them in a load function that would be called when the page loaded in, but this did not work either, because it made it so that the variables that were being instantiated were only local to that specific function, so instead I moved the instantiations outside of the load function, and then set their values inside of the loading function. This approach worked quite nicely.
Then, I set up the event listeners for each and every button on the calculator. This, I think that I also did through copy and pasting, and checking the code just now, I did. I might have been able to set up a loop for the digits at least, but the way I did it works and I can't change the past, so it is what it is. I created a new function, called "action", and then I connected those event listeners to a new function, with a parameter based on what button it was. After that, I went to work on filling out this "action" function.
I separated that action function into segments, depending on if number buttons were being pressed, or if operation buttons were being pressed, or if other ones were being pressed. The other buttons in question being the back button and the clear button. The enter button is considered an operator, which is fine by me. I set it so that if the incoming signal's first argument is equal to the string "number", and then, if that was true, it would add that number as a string to the end of whatever the text is on the display, unless the display was just "0", in which case the number pressed would replace the one on the display screen.
For the case that the first argument of the function is not equal to the string "number", I made it so that it is subsequently compared to the string "operator", i.e. if the button pressed is an operator. If the argument of the function is equal to the string "operator", then the program stores the current display in an array. This is storage for when the expression needs to be evaluated. After that, I made it check if the entered key is the enter key, and if it is, then it calls the evaluate function. If it's not the enter key, then it stores the key value inside another array, to keep track of which operators have been used, and then the display text is set to zero, so that you can enter in the next number in the operation.
If the first argument is equal to the string "key", then it's either the back button or the clear button. The back button simply shaves off the last character of the display text, unless it's zero, in which case it does nothing, or unless it's a single digit, in which case it sets the number to zero. The clear button, on the other hand, sets the number to zero, and clears out both arrays for storing numbers and operators. In this sense, it's more of an "all clear" button, but I think that was was more versatile than if it didn't clear the operators.
In the evaluate function, I made two loops. One of them checked for multiplication and division operators, and one of them checked for addition and subtraction operators. Both of them looped over the list of operations. Whenever they reached the operation, they called the operation function, which handled multiplication, division, addition, and subtraction. If the function was called with the argument "multiplication", with two number arguments, it performed multiplication on those two numbers, returning the new number, and inserting it where the old first number was, and deleting the spot the new second number had. This is much the same for every other operation, although division required the numbers to be rounded every time it was applied. Then, after performing these operations, it returns the value of the new number to the evaluate function.
After the evaluate function finishes its results, slowly combining the numbers until there is only one left, it returns that final number to the action function, which then sets the display text of the calculator to that number.
This calculator includes negative numbers, so I checked that if the only remaining symbol after a backspace was the negative sign, it would turn the number into a zero. Maybe this isn't wise, and people would want to use a lone negative sign to create negative numbers without having to create equations. This could be an issue to be brought up in a future release, if there are any.
Anyway, developing this calculator has been fun, and a little easier than I thought, to be honest. Hopefully the other projects go well, but I'm already having weird unfixable API errors with my website, so I think I may stick to just using a CSS database stored and updated locally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="calc.js"></script>
<link rel="stylesheet" href="calc.css">
</head>
<body>
<div class = "calculator">
<div class = "clearbutton">
<text>C</text>
</div>
<div class = "dividebutton">
<text>/</text>
</div>
<div class = "multiplybutton">
<text>X</text>
</div>
<div class = "addbutton">
<text>+</text>
</div>
<div class = "subtractbutton">
<text>-</text>
</div>
<div class = "onebutton">
<text>1</text>
</div>
<div class = "twobutton">
<text>2</text>
</div>
<div class = "threebutton">
<text>3</text>
</div>
<div class = "fourbutton">
<text>4</text>
</div>
<div class = "fivebutton">
<text>5</text>
</div>
<div class = "sixbutton">
<text>6</text>
</div>
<div class = "sevenbutton">
<text>7</text>
</div>
<div class = "eightbutton">
<text>8</text>
</div>
<div class = "ninebutton">
<text>9</text>
</div>
<div class = "zerobutton">
<text>0</text>
</div>
<div class = "enterbutton">
<text>Enter</text>
</div>
<div class = "display">
0
</div>
<div class = "backbutton">
<=
</div>
</div>
</body>
</html>
.calculator {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 300px;
transform: translate(-50%, -50%);
}
.clearbutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 22.5%;
left: 20%;
height: 55px;
width: 115px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.dividebutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 22.5%;
left: 90%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.multiplybutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 37.5%;
left: 90%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.addbutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 52.5%;
left: 90%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.subtractbutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 67.5%;
left: 90%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.enterbutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 82.5%;
left: 80%;
height: 55px;
width: 115px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.zerobutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 82.5%;
left: 50%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.onebutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 37.5%;
left: 30%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.twobutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 37.5%;
left: 50%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.threebutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 37.5%;
left: 70%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.fourbutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 52.5%;
left: 30%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.fivebutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 52.5%;
left: 50%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.sixbutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 52.5%;
left: 70%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.sevenbutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 67.5%;
left: 30%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.eightbutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 67.5%;
left: 50%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.ninebutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 67.5%;
left: 70%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.backbutton {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
position: absolute;
top: 22.5%;
left: 70%;
height: 55px;
width: 55px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
.display {
display: flex;
justify-content: right;
align-items: center;
background-color: lightblue;
position: absolute;
top: 7.5%;
left: 50%;
height: 55px;
width: 295px;
transform: translate(-50%, -50%);
text-align: right;
font-size: 40px;
}
let calc
let zero
let one
let two
let three
let four
let five
let six
let seven
let eight
let nine
let display
let numbers = []
let operators = []
function load() {
calc = document.getElementsByClassName("calculator")[0]
zero = calc.getElementsByClassName("zerobutton")[0]
one = calc.getElementsByClassName("onebutton")[0]
two = calc.getElementsByClassName("twobutton")[0]
three = calc.getElementsByClassName("threebutton")[0]
four = calc.getElementsByClassName("fourbutton")[0]
five = calc.getElementsByClassName("fivebutton")[0]
six = calc.getElementsByClassName("sixbutton")[0]
seven = calc.getElementsByClassName("sevenbutton")[0]
eight = calc.getElementsByClassName("eightbutton")[0]
nine = calc.getElementsByClassName("ninebutton")[0]
add = calc.getElementsByClassName("addbutton")[0]
subtract = calc.getElementsByClassName("subtractbutton")[0]
divide = calc.getElementsByClassName("dividebutton")[0]
multiply = calc.getElementsByClassName("multiplybutton")[0]
back = calc.getElementsByClassName("backbutton")[0]
clear = calc.getElementsByClassName("clearbutton")[0]
enter = calc.getElementsByClassName("enterbutton")[0]
display = calc.getElementsByClassName("display")[0]
zero.addEventListener("click", function() {
action("number","0")
})
one.addEventListener("click", function() {
action("number","1")
})
two.addEventListener("click", function() {
action("number","2")
})
three.addEventListener("click", function() {
action("number","3")
})
four.addEventListener("click", function() {
action("number","4")
})
five.addEventListener("click", function() {
action("number","5")
})
six.addEventListener("click", function() {
action("number","6")
})
seven.addEventListener("click", function() {
action("number","7")
})
eight.addEventListener("click", function() {
action("number","8")
})
nine.addEventListener("click", function() {
action("number","9")
})
add.addEventListener("click", function() {
action("operator","add")
})
subtract.addEventListener("click", function() {
action("operator","subtract")
})
divide.addEventListener("click", function() {
action("operator","divide")
})
multiply.addEventListener("click", function() {
action("operator","multiply")
})
enter.addEventListener("click", function() {
action("operator","enter")
})
back.addEventListener("click", function() {
action("key", 1)
})
clear.addEventListener("click", function() {
action("key", 0)
})
}
document.addEventListener("DOMContentLoaded",load)
function operation(index, operation) {
let num3
if (operation == "multiply") {
num3 = numbers[index] * numbers[index+1]
} else if (operation == "divide") {
num3 = numbers[index] / numbers[index+1]
} else if (operation == "add") {
num3 = numbers[index] + numbers[index+1]
} else if (operation == "subtract") {
num3 = numbers[index] - numbers[index+1]
}
num3 = Math.floor(num3)
numbers.splice(index, 1, num3)
numbers.splice(index+1,1)
operators.splice(index,1)
}
function evaluate() {
for (let i = 0; i < operators.length; i++) {
if (operators[i] == "multiply") {
operation(i,"multiply")
} else if (operators[i] == "divide") {
operation(i, "divide")
}
}
for (let i = 0; i < operators.length; i++) {
if (operators[i] == "add") {
operation(i,"add")
} else if (operators[i] == "subtract") {
operation(i, "subtract")
}
}
return numbers.pop()
}
function action(action, val) {
if (action == "number") {
if (display.innerText == "0") {
display.innerText = val
} else {
display.innerText = display.innerText + val
}
} else if (action == "operator"){
numbers.push(Number(display.innerText))
if (val == "enter") {
display.innerText = evaluate().toString()
} else {
operators.push(val)
display.innerText = "0"
}
} else if (action == "key") {
if (val == 0) {
display.innerText = 0
numbers = []
operators = []
}
if (display.innerText == "0") {
} else {
if (display.innerText.length == 1) {
display.innerText = "0"
} else {
display.innerText = display.innerText.replace(/.$/,"")
if (display.innerText == "-") {
display.innerText = "0"
}
}
}
}
}
--6/21/24
I finished the wordle exercise! This was a bit annoying in a lot of ways, because I got stuck on a nasty bug for a few days. However, I managed to fix it, and have completed it to satisfaction. It's been committed to the de02-website branch.
The start of the project began very similarly to the calculator, in fact, I reused a lot of the code! However, I only created one line-holder div and one letter-holder div, and simply duplicated them to fill the 5x6 grid. This was a little difficult, but I think I managed it quite nicely. After that, I set up some events for typing in letters to the document, and constructed a system for filling in each row, using a 2 length array for position.
I believe the hardest part by far was getting the fetch to work. I was getting an incredibly unhelpful error that the "solution" to seemed to be to edit some settings on the server side. After a lot of looking into fetch requests, I finally figured out that the packet I was sending was malformed, being just the json itself and nothing more. To fix that, I added a method and header item, and turned the previous packet into an item. This fixed my woes, and allowed me to actually finish this project.
After that, it was mostly trial and error getting the tiles to turn green/yellow, and setting up the win conditions. Overall, a fun project, although it hit a nasty snag in the middle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="wordle.js"></script>
<link rel="stylesheet" href="wordle.css">
</head>
<body>
<div class = "wordle" id = "wordle">
<div class = "line" id = "line1">
<div class = "letter" id = line1letter1></div>
</div>
</div>
<div id = "congrats"></div>
</body>
</html>
.wordle {
background-color: rgb(221, 221, 221);
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 300px;
transform: translate(-50%, -50%);
}
.line {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(184, 184, 184);
position: absolute;
top: 10%;
left: 50%;
height: 55px;
width: 295px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
overflow: visible;
}
.letter {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(150, 150, 150);
position: absolute;
top: 50%;
left: 10%;
height: 40px;
width: 40px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 40px;
}
let wordle
let rows = []
let position = [0,0]
let letters = Array(6).fill(0).map(x => Array(5).fill(0))
let regex = /^[a-zA-Z]+$/
const WORDS_URL = "https://words.dev-apis.com/validate-word"
const SOLUTION_URL = "https://words.dev-apis.com/word-of-the-day"
function validateWord(word) {
let json = {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({word: word})
}
const promise = fetch(WORDS_URL,json)
promise
.then(function(response) {
const processingResponse = response.json()
return processingResponse
})
.then(function (processedResponse) {
if (processedResponse.validWord) {
compareWord(word)
}
return processedResponse.validWord
})
}
let solution
async function getSolution() {
const promise = await fetch(SOLUTION_URL)
const processedResponse = await promise.json()
solution = processedResponse.word
return processedResponse.word
}
getSolution()
function compareWord(word) {
console.log(word)
console.log(solution)
if (word == solution) {
for (let i = 0; i < 5; i++) {
letters[position[0]-1][i].style.backgroundColor = "green"
document.removeEventListener("keydown", input)
document.getElementById("congrats").innerText = "Congratulations! You win!"
}
}
let wordLetters = word.split("")
let solLetters = solution.split("")
let colorArray = [0,0,0,0,0]
for (let i = 0; i < wordLetters.length; i++) {
console.log(wordLetters[i])
console.log(solLetters[i])
if (solLetters[i] == wordLetters[i]) {
colorArray[i] = 2
}
}
console.log(colorArray)
for (let i = 0; i < wordLetters.length; i++) {
if (colorArray[i] == 0) {
for (j = 0; j < wordLetters.length; j++) {
if (colorArray[j] == 0) {
if (solLetters[j] == wordLetters[i]) {
colorArray[i] = 1
solLetters[j] = ""
}
}
}
}
}
for (let i = 0; i < wordLetters.length; i++) {
if (colorArray[i] == 0) {
console.log(colorArray)
} else if (colorArray[i] == 1) {
letters[position[0]-1][i].style.backgroundColor = "yellow"
} else if (colorArray[i] == 2) {
letters[position[0]-1][i].style.backgroundColor = "green"
}
}
}
function load() {
wordle = document.getElementById("wordle")
rows.push(document.getElementById("line1"))
for (let i = 0; i < 6; i++) {
console.log(i)
if (i == 0) {
for (let j = 1; j < 5; j++) {
let letterClone = document.getElementById("line1letter1").cloneNode(true)
let left = 10 + (20*j)
letterClone.style.left = left + "%"
letterClone.id = "line" + (i+1) + "letter" + (j+1)
rows[i].appendChild(letterClone)
}
} else {
let lineClone = rows[0].cloneNode(true)
let height = 10 + ((96/6)*i)
lineClone.style.top = height + "%"
lineClone.id = "line" + (i+1)
rows.push(lineClone)
let children = []
children.push(...rows[i].getElementsByClassName("letter"))
for (let j = 0; j < 5; j++) {
children[j].id = "line" + (i+1) + "letter" + (j+1)
}
wordle.appendChild(lineClone)
}
}
for (let k = 0; k < 6; k++) {
for (let j = 0; j < 5; j++) {
console.log(k)
letters[k][j] = document.getElementById("line" + (k+1) + "letter" + (j+1))
}
}
console.log(letters)
}
document.addEventListener("DOMContentLoaded",load)
function input(inputKey) {
inputKey = inputKey.key
console.log(position)
if (inputKey == "Backspace") {
if (position[1] > 0 && position[1] < 4) {
letters[position[0]][position[1]-1].innerText = ""
position[1]--
} else if (position[1] == 4) {
if (letters[position[0]][position[1]].innerText == "") {
letters[position[0]][position[1]-1].innerText = ""
position[1]--
} else {
letters[position[0]][position[1]].innerText = ""
}
}
} else if (inputKey == "Enter") {
if (position[1] == 4) {
if (position[0] == 5) {
document.removeEventListener("keydown", input)
document.getElementById("congrats").innerText = "Congratulations! You lose!"
return
}
if (letters[position[0]][position[1]].innerText != "") {
let lineWord = ""
for (let i = 0; i < 5; i++) {
lineWord = lineWord + letters[position[0]][i].innerText
}
// API business
validateWord(lineWord)
position[1] = 0
position[0]++
}
}
} else if (regex.test(inputKey) && inputKey.length == 1) {
console.log("array is: " + letters[0][0])
letters[position[0]][position[1]].innerText = inputKey
if (position[1] < 4) {
position[1] +=1
}
}
}
document.addEventListener("keydown", input)
6/21/24
I only managed to finish a bit of the website authentication assignment. Mostly I just added some scripts and replaced some old ones. I changed a few things here and there to fit what I was going for more effectively, but ultimately not too much was accomplished.
What I have done can be viewed here. https://github.com/TheEvergreenStateCollege/upper-division-cs/commit/9070442231b4c1f063d417008e563b2c47641c53
