webproject

This is a landing page that I made for a auction company.

This is my second react project , using css grid system. I remember that when I first time develpe web paging using React js, I was really repelling it. And now I think Reac js is really a fantastic library to develpe the web page.

I hope you like it!

This is a web page that I made for a local gym.

This is my first react project , using css grid system

There is not any fancy animation in this page. Cause I am still learning react motion, I will apply some animation soon.

I hope you like it!

This is anthoer game project that I have done.

I thought this game would be more complex than the last project, tic tac toe, cause it´s the last project from FCC for the front end developer certificate. But it turns out that it only took me one day to finish it. It shows that I really have maken a lot of progress these three months.

This is a classic game like tic tac toe, so the basic feature is : the user should memorize the move that go through the computer, and after computer move, the user should repeat these moves. There four colors , nad each color has a different sound. the user can turn on strict mode, that means once the user fails , he has to start over from level 1.

I´m so happy that finnlay I have finished all the projects from FCC for the front end developer certificate. And it´s not the end, it´s just another beginning for new challenges.

I hope you like it!

This is a the first game project than I have done with html5 canvas and javascript.

This project is totally the most complex than the others projects that I have done till now. Fisrt I have to use html5 canvas to animate each circle and X for each move. And the second,the AI logic is complex, and I almost thought I could not finish this project.

There is not so much to describe for the basic feature of the project, it´s a classic tic tac toe game. The user can choose play X or O, and also can choose who play first.

I´m so happy that I can finish it all by my own, and I´m satisfied with the result.

I hope you like it!

This is a project from Free Code Camp.

This project is a little bit more difficult than the others, becasue this is my first time using Html5 canvas , I find it quite intimidating, it´s not like usual javascritp code and I can´t use other Html tag. But I find it´s very interesting. It makes the web design more creative.

And I use Adobe Animate CC to make the intro animation, represent how the thing evolve according to hte time, with the sound track of star war.

The basic function of this app is : the user can set a session time nad a break time, and the user can pause ,continuo and change the time on the fly. the center image will change according to each session.

I hope you like it!

This is a project from Free Code Camp.

This is a simple caculator APP, I designed it first in Adobe Experice Design. And and I love how it turned out.

The dificulty is how to make the logic right between all the components. For example, at beginning the user can´t type any operator without typing any number. And the user can´t type two operaters one after another. ANf when the user get the result, he/she can´t typing any number or operator any more. And so on.

I hope you like it.

This is a project that I did por the purpose of practicing Javascript.

The main feature of this APP is: there are three test for user to choose to do the speed test. When the user type the first word, it begins to count the time, if (the user types wrong), {the outline of the input box will show red}, else{the outline will be green}.

When the user finish the test, a result box will show show up. It containes several information, include how many times has tired the user, the time it has taken the user to finish the test, the record (high score), how many error has made, the accuracy and the typing speed.

The dificulty is how to make the logic right between all the components. And two versiones of language definitely makes the code more complex.

I hope you like it.

This is another project from FreeCode Camp, and it requires using media wiki API to get the wikipedia page and also the user can click a button and generate a random wikipedia page.

Basically it´s quite the same with my last project , the weather app, but this time I find more complicated due to the page layout and the API call. This time worked with XML format instead of JSON, and to get the random page I have to make two API calls. But I have so much fun with it and I´ve learn a lot form it.

So the basical function of this APP is: First, the language page will show up to request the user to choose a language (English or Spanish) and then it will lead to the user to the main serach page.

In this page the use can type a subject that he wants search in the search bar, then will silde in another page to show the generally conent of the subject, if the user wants to know more, he can click "know more" button to get the wikipedia page, or he can click "back" button to go back to the search page.

And another function is the user can click "give a try button", then will slide in another page to show the user 10 random articles, if the user is interested in one article ,he can click on it , and it will lead to the corresponding wikipedia page, or he can click "another try" button to get another 10 random articles. And the last hte user can click "back" button to go back to the main search page.

I hope you like it.

This is another project from FreeCode Camp, and it requires using API to get the current weather. And this is my first time to build a web page using API, so I did find it a little difficult, but in the end I have made it and I´ve learned a lot how to deal with AJAX and geolocation by building this page.

How to design the page is really bothering me a lot. finllay I decide use just white background to represent a simply and clear interface.

So basically this app can show you the current location, the date, temperature, a simply description, sunrise time, wind speed, humidity and can turn the tempwratur from celsius to fahrenheit. And finally I add a search bar that can allows you to search the weather of another city, and another button to come back to the current city.

I used a jquery plugin called easyAutoComplete to help me finish the live search bar, but the challenge is how to position the search bar nad how to rewrite the css, it really took me a lot time to figure it out.

I hope you like it.

This is a project from FreeCode Camp, and I really love how the project turns out. I´ve applied AJAX and JSON to this project, and also a Jquery plugin named Typed.js. It was only a spanish quote generator only, cause I want to contribute it to all my gym pals. But later I thought it will be cool if I can add an English version.

This is not a difficult project, however I did encontered some problems when I dealed with it, like how to control the font size to be responsible according to the amount of the words of each quote,and later on how to control two version of language, so that when one version show up , the other version should be hide.

And I also encountered a browser render problem. Cause when I "glow" the header, it worked fine in my desktop, but when I test it in the mobile device, the letters were typing out with so much lag, so I had to remove the text glow and add it to the end, which I think it´s even better than before.

This is a quite simple project, so there is not too much to comment. I use a Jquery plugin called "countdown" for this project. And I did customize a little the time style. And I have two images for the background, one is bigger which is for desktop o ipad, the other is smaller which is for moible.

And I use photoshop to enchnce the orignal photo which is much dimmer than the photo you see right now.

I hope you like it