What I did?

• Added more generators
• Added the prompts for it
• Finished the readme

What I did now?

• Added more generators in HTML
• Added the CSS for it
• But now I just have to add the JS

What I did so far?

• Outlined the code (such as the buttons and the generator itself)
• Added css (on the buttons and generator)
• Added the JS (such as the quotes)

Summary

HTML

• Created the layout
• Added buttons

CSS

• Built animations for shaking, opening capsules and movements
• Added effects for the machine

JS

• Created systems for movements, velocity and direction
• Generated the capsules with random toys and colors
• Added physics such as gravity, friction and collision

And I figured out my nothing was showing turns out I need to link the JS and CSS.

So I made a video but it is not showing cause I guess it’s too big of a file so here are the images of the before and after.

What I did so far in JS and CSS?

Capsule Movement

• Built the movement where each capsules update positions
• Added handling so capsules don’t overlap and stay inside the machine
• Created logic to stop capsules
• Added capsule rotation

Handle controls

• Made the handle interactions
• Added smooth handle rotation
• Made the machine release capsule
• Added handle reset when released

### CSS

• Started to add images
• Started to add UI
• Added animations

P.S. There are a lot of errors in my code right now, so nothing is showing up properly at the moment and sorry for showing the same image

What I did in (JS) so far?

Capsule setup

• Selected all ```
  .capsule-wrapper

- Turned into an array of objects
- Each capsule stored such as (DOM elements, position, rotation, radius, velocity, acceleration, bounce and linked toy elements)
- Assigned each capsule a random starting position inside the machine
- Set the initial movement direction up
### <u>Movement</u>
- Each capsule moves using velocity and acceleration
- Velocity increases over time based on the acceleration
- Friction slowly reduces movement
- Helper function adds force to velocity
### <u>Helper function</u>
- Created functions to move objects smoothly and prevent overlap
- Returns a correct position 
- Used for collision separation
### <u>Shake Effect</u>
- Random velocity direction for all capsules
- Reset movement
- Add shake class to the machine
- Remove shake class
### <u>Animation</u>
- Controls open and close machine flap

Also I don't have a new picture of my results

What I did so far?

• Created machine design with pixel art styles
• Added interactive buttons
• Used JS to make the capsule appear automatically
• Added random toys and colors for the capsules
• Used math for movement and rotation
• Next after I am done doing the JS I will start with the CSS

What I did?

• Added tasks cards to display subject, time and goals for selected days
• Added checkboxes to mark tasks as completed and refresh instantly
• Created a time slot generator that end time based on the duration and start time
• Added pdf to download the timetable
• Changed the colors

What I did?

• Built the structure
• Added weekly day schedules
• Created inputs for subject, time and goals
• Added a time slot generator with start time and duration options
• Added task checkboxes
• Added a pdf download
• Made it responsive for all screen types
• Added animations and hover effects

What I did so far?

• Created an input field and button
• Added checkboxes
• Progress bar
• UI

I just wanted to document this but I will be trying a different approach

I added more colors

What I did?

• Box shows up after a random time
• Box changes colors
• Press key
• Game checks
• Shows reaction time in ms
• Game restarts

What did I do?
Worked on the JS such as:

• Created the balloon function
• Created the start game function
• Created the end game function
• Added audio sound to the balloons
• Changed the colors

What I did?

• I built a start screen
• Game UI: Timer and scoreboard
• Balloon container showing the floating balloons going upward
• End screen showing the final score

What I did?

• Made the claw machine interactive (claw can move, grab toys, and drop them)
• Changed the colors

What I did?

• I started writing the JS
• Set up the base structure of the game
• Set up variables
• Objects to keep track of the game
• Sized the images

What I did now?

• Built the layout of the claw machine
• Added the claw arm and claws including animations
• Styled control buttons with animations
• Created multiple toys (still adding more)
• Added changes (grabbing)

What I did this time?

• Positioned the top and bottom
• Added images

What I did?

• Built the structure
• Created separate sections
• Set up classes
• Styled (work in progress)
• Created movement buttons
• Started adding animations in CSS

What I added

• I added a hover effect on the planets where every time a user goes over it shows a color

What I changed

• I changed the image of Saturn after seeing that it has rings

What did I do

• Nothing was added or removed just spaced out the brackets

What have I done so far in CSS

• I worked on adding the visual representations of the planets
• Instead of placing all of the images in the HTML, I did it in CSS with ::before, I repeated this way for all of the planets includes Venus, Earth, Jupiter, Saturn, Uranus, Neptune, and Pluto
• I also added a keyframe for the animations

What have I done so far in CSS

• I worked on positioning the planets and making them orbit around the sun
• For the moon I positioned it inside the earth and gave it it’s own animation. This allows it to orbit around the earth instead of the sun

What I have done so far

• I created the basic structure with HTML by adding containers that hold the sun and all of the planets. I also placed the moon in side of the earth so it can orbit around it.
• In CSS, I centered everything on the screen and made it black. I also added a glow effect on the sun. (I am not done with the css yet)
• In JS, I wrote a function where it generates 1000 stars and places it randomly across the screen.
  (I am trying to explain my process)

After rewriting my code (especially the JS) I am now able to say that this project is working the way it should

What I added in JS

• References
• Event objects
• detect touch
• created grid (rows and columns)
• clear grid
• erase button
• paint button
• display grid (width and height)

Now I will figure out why the grid is not showing

What I did?

• Changed the color of the menu container and start button
• Made the cards look smooth when clicked on and stays in place
• Changed the color of the game comtainer

I have changed a lot of stuff like the html and css

This is the start of this project
I have finished outlining and added a little bit of styling
Now I am working on the JS

What I did?

• Finished writing the readme
• Created a demo link
• Added a banner
• Added a description
• Ready to ship

Fixed a bug and now the game is fully working

What I did?

• check if there is a winner
• check if game is over
• delete game
• set score on the scoreboard
  The game is not fully working until I debug some stuff

Things I added

• Dragging logic
• Open and Close logic
• Apps

Things I Added

• top bar
• created window
• added content section
• styled window
• background added
• buttons added
• clock/date added

There is not much to see yet but what I did was styled the slots, added hover effects on the red and yellow, created the columns and slot and made the slots clickable.

I changed up the layout a little because I wanted to add a opening page before the game.
What I added?

• a play button inside the game
• a scoreboard
• used Flexbox for layout and alignment
• created a game container 420x420
• styled the border

I built a welcome screen for my personalOS
I added text, image, and links, then I did some styling with colors, fonts, and spacing
I am trying to make my Devlog for an hour long

What I did in code?

• set up a 6x7 game board
• define/created variables

This is how it currently looks

• Added game over UI
• A restart button which is just the start button after the player gets hit by a enemy
• Changed the color of the player, projectile and button to make it more space theme

Added a start game button

So I added a score using the tailwind css library
When the player hits the enemy they get 100 points
When the player hits the player to the point that they are gone they get 250 points added to their score

Now I shrunk the enemies on hit with the gsap library and created particle explosion on hit

This time i got some color to the game such as changed the background color, changed the color of the player and enemies

What I did

• Changed the colors
• Changed the title
• Changed some logic

What have I done so far

• I centered the content on the screen
• I have created different options
• Created character state
• Created character trees

I planned on submitting this project to a different event but I have decided to submit it to this one but that is not the point.

Detect collision on enemy/projectile hit
Detect collision on enemy/player hit
Now every time the enemy hits the player the game stops

I have created enemies in different sizes and in all directions of the screen

This is shooting projectiles
Every time the screen gets clicked red dots appear

I created a player with the use of canvas

This a video of the game working with all it’s features

• Added different/new words
• Changed the sizes of the container for all the words can fit

These are some of the words I am using

What I done so far

• Fixed bugs
• Changed colors such as the background and buttons

Things I have done so far

• Added timer function
• Added check word function
• Added event listeners

Started working on the JS
What have I done so far?

• Added variables
• Added for loop

So I added a folder where the words would be and these are the words that I will use as a placeholder until I find words that I want to use.

These are some of the words I am currently using.

This is how it looks after the html css was added
L O R E M is just a placeholder and the colors
I will remove this soon maybe when I start or after the JS is added

I added more prompts and I tried to add other features which didn’t work well so they weren’t added but here is the code I added and the video of everything working.

This is a video of the finished project

Changed the layout and background color

Added more prompts

This is the finished working product but I do want to add more

I am starting a new project
Mad Libs
I have already added the html and css such as
a body, divs, and a button
This is how it looks so far

This the full game

I changed the background color again because my last project already had purple so I decided to use pink
I also changed the button color and the banner for this project

Added the conditionals
Changed the background color
Added a container
Added text to indicate if the number is too high or low and added text for the amount of attempts a user is guessing

Started the JS
Added variables and event listeners
Now I will move on to adding conditionals

This is what I have so far after adding the HTML and CSS

This is a full video of the working game

I changed the color of the ball, square, and the horizontal bars or walls

I fixed a few typos
This is the results

I finished all the code and now I will fix any issues
This is how the maze looks so far

Finished the CSS
Here is the result

I decided to rewrite my code and just finished the html
This is the result so far

So i am done with the code
and now I will fix any issues with it
But this is what I have so far

I added a lot of code to the JS
The code I added today was the message, players move, players position and timer
This is just some of the code I have written

I added code in the JS like functions and while loops
But I notice that I am able to click on the arrow buttons

Added a title on the game page

Added some CSS
I have a lot more to add but this is how it looks so far
These are the controls for the character that needs to get passed the maze

I started coding
I finished the HTML and now
I am on the CSS
These are the emojis that I am using for this project

This is my third project
Added it to Github and made my first commit

I added comments to better understand the code and I changed the colors that I never heard or seen before

This is the final result

I am on the JS right now but in the meantime this is how it looks without the words on the side

I am redoing this project with different things
Here is a pic of it so far

I am still trying to make this work but I added my image in HTML

Added features such as dragging, moving and turns

So I made code where I link my image and it should appear in the board
My next step is to figure out why my image is not appearing on the board

I was able to get my image into pieces
It took a loooooooong time but I was able to do it
And I am happy with the results

This is the whole game in action

I added more JS where you are now able to hit the level buttons and the start button

I just finished the CSS and now I am on the JS
Here is some of the JS I am working on

Right now I am rewriting my css and this is what I have so far
I have more but this is just some

This is how rewriting my HTML is going
It is going well

I am going to rewrite my code but in the meantime look at this cute avocado that I found and plan on using for this project

added code that would make the cards flip and removed the reset button since it is not working

I am rewriting my code to better understand it
Here is the HTML, CSS and JS
This is some of the css I have more

Change this code to make it more readable and understandable

This is how it looks so far after adding the css
(Board, pictures holder and turn counter)

Added a timer and it only starts when a card is clicked on

Added a flip sound for the cards
A winning sound for the end of that level
A counter for the amount of moves that were played

Added some comments to better understand my code
Here are some examples

This is what I have after changing the colors multiple times
I might change again

Added 3 levels and changed the images

Now I will add some levels and each level will have different emojis

Now every time there is a match it stay and every time there isn’t a match it flips back

This is how the game is looking so far

These are the emojis or images I will add for this game
I might change some
This is a hint for the theme

Added some css

Made my first commit on this project