The repository for the ACES software aid frontend. Making it easier to develop and build content on the internet.
Home Page: https://roynek.com/kwickerhub/WebCraftifyAI/
License: MIT License
After a user signs in, we do not want to take them straight to the dashboard environment. We want to take them to their profile page, where we can display their different projects, modules(contributions) and achievements. Upon clicking the displayed projects or editing them, We can then take them to the dashboard environment.
I am making the Job very easy by dropping a possible profile page design idea.
The person that accepts to handle this issue will have the right to make "unlimited" pull requests to this profile_page.html he/she creates. Good luck.
Feel free to twerk/improve the idea image above where possible.
Remember that our goal is to bridge the gap between front-end, back-end development and UI/UX design.
In most online User Interface design maker software, the canvas is used and other components of the canvas are all created but what if we try to use the absolute or fixed positions in html. This is a crazy idea and it will be on the test for now before it can be accepted or completed.
We can discuss more about this issue if interested.
Describe the bug
We also need some suggestion on the input box for size properties like border radius, width, font-size, height etc. All this properties only need some pixels, em, %, vh or vw
We can always make some global suggestions for the users. example (9px, 100%, 100vh, 20px, etc)
File/Files you will work on
dashboard.html
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
At the end of the day, your code should make it easier for people. When people click a size property, they should get some really good suggestions. HINT=Use HTML datalist tag
The landing page is overflowing in mobile view
Since this is an open source project, we will love to promote our own. We will love to celebrate people who make articles or content creators on YouTube who make videos about this project or Tiktokers who make short clips about this project on Tiktok. We will love to use this page to encourage everybody.
In this page, All the list of videos or articles creator by contributors should be listed out. People can easily learn from the videos or articles. Other users can also upload their new articles or videos.
The technical part is that we do not have an API on the back-end ready to receive and store content about tutorials. So we will be using a JSON file or a CSV FILE to store the names of Youtube videos or articles. We will append new content to the JSON file when the user decides to add new content. This is a skilled page and just requires a little of brain work.
We need a Contributor that will love to post updates about KwickerHub on Facebook,Twitter and even Instagram
Be rest assured that you will be come a maintainer and part of our core team.
@emmaglorypraise please complete the homepage by adding the image slider. Choose images from the assets folder as there are may images/photos there.
The goal here is to add a comment inside the element(with the id "the_dev_dashboard") in the "dashboard .html". This comment will contain important information about the project. For instance; if that project needs bootstrap, If the project needs special fonts, the favicon, description, etc
This will also help the view_render page to from the back-end
Add the HTML comment below inside the HTML element before any other content
<!-- <head>
<title> #Particular Project Name</title>
<script>
//Plugin Start
//##
//Plugin End
</script>
</head> -->
One More Thing:
A particular JavaScript function(called "add_element_2_dashboard" in "dashboard.js") changes the entire content of that particular element in line #110. We need your comment on that element unchanged.
We understand that the content of the body of the new page will be equivalent to the design/HTML elements in the development dashboard. However, Will have not developed a way to secret address the head section of the new Document. This secret comments will have a section where plugin and other tools can be imported for that particular project
After a user signs in, we do not want to take them straight to the dashboard environment. We want to take them to their profile page, where we can display their different projects, modules(contributions) and achievements. Upon clicking the displayed projects or editing them, We can then take them to the dashboard environment.
Describe the bug
The content in the UI DASHBOARD is not saved. However, we already have the functions and the required code to save and reload the design when needed. We need you to actualize a save, auto save and reload system to help the UI/UX section.
File/Files you will work on
ui_dashboard.html
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
People should not loose their design work at all.
Please, move all the styles in the style tag in dashboard.html to the css section under the assets folder. This will help keep our work clean and nice.
Most times, people make a lot of mistakes when creating designs or web pages. We need a redo and undo button. in the dashboard.html file.
We can also add some shortcuts of
ctrl + z = undo
ctrl + y = redo
ctr + shift + z = redo
We need to move all JavaScript code from dashboard to the script section in assets: frontend/assets/vendor/js/
Steps
Thank you.
When the menu icon is clicked, activate or display the header similar to the one in "dashboard.html"
The appearance of the settings pop-up on a mobile device is not appealing. We just need you to make the content on the pop-up not overlay. You may just need to change the width of the pop-up box and the (left, top) position.
remember it is for the mobile-view only. So you may want to use CSS media queries.
The Goal.
Remove all the content in "test.html"
copy the 11 lines of code from "testpage.html" into "test.html"
The Aim here is to maintain two test pages for the entire project for now.
When the logo is clicked
it results a 404 error
Describe the bug
We also need some suggestion on the input box for size properties like border radius, width, font-size, height etc. All this properties only need some pixels, em, %, vh or vw
We can always make some meaningful global suggestions for the users. example (9px, 100%, 100vh, 20px, etc)
File/Files you will work on
ui_dashboard.html
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
At the end of the day, your code should make it easier for people. When people click a size property(example: height, border radius, width etc), they should get some really good suggestions. HINT=Use HTML datalist tag, Get more information from the dashboard.html file as many people have made similar contributions to values e.g(float, display etc)
Add description on Save Icon on dashboard.html
If you hover at the Save sub-menu under the file menu of the "dashboard.html" file, You will see a short pop-up "Tooltip text".
Change the "Tooltip text" to "more"
Action(little JavaScript)
When a user clicks on "more", He should then see a description about the save button. for instance "Use this option to save your project to the serve to avoid loss of data. ".
Describe the bug
Just like people can add squares and circles, We want out users to be able to add text content. When the User clicks the font/text icon on that bottom bar, A default text should always be adding on the development environment.
File/Files you will work on
ui_dashboard.html
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
We except the users to able to add some text.
move the following text files out of the pages folder
attributes.txt
css_style.txt
HTML elements.txt
test_parts.txt
You can create a folder in "assets". Call the new folder you created "addon"
Paste all the text files above into the "addon" folder
We need someone to create an html page in the pages folder that will content a little description about us. The design can be made and the content will be added gradually.
The Design
The design should include our logo or a brand nice image of a hub and text content
The content should include:
What is the name of the Software?
What is the main aim of the Software?
Who invented the Software?
How many contributors have improved the software?
Adding a color picker for the color attributes and styles in case the user is unsure of the Hex or rgba code.
Describe the bug
As much as HTML is simple, we still make mistakes. LOL. Please check the table in aboutus.html and fix it.
File/Files you will work on
aboutus.html
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
The Table opening tags and end tags should be alright. The HTML table should be fixed. Thank you.
Create a help.html page. It has to look like a question and answer page. Where people see already asked questions and they too can ask questions. I have made a little research on pages i think you should look at the list of question and answer site below:
https://athemes.com/collections/best-question-answer-wordpress-themes/
You are free to make the Job more simple for yourself.
Feel free to also make the page simple for you.
You will have to use a CSV file or a JSON file to store the questions and the corresponding answers.
user_id, question, answer, user_id(the person that answered the question), date
Good-luck here
I have noticed that some sentences do not make perfect sense. You can easily try to fix that.
We depend on the content of the settings pop-up in "dashboard.html" but if the page is reloaded, All user settings(preferences) are all lost.
So we need you to create some cookies to store the user preference.
//Something like this
if(cookies exis){
//get the cookies and set them to our settings pop-up input value.
}else{
//We want to set the values to the default
}
In the title tag of all our pages a favicon should be added.
The favicon will be our brand logo - Kwicker Logo in the assets area.
Describe the bug
We do not want people to loss their work or projects, So we intend to automatically save their projects.
Algo 1:
U can use a time interval to always call the save function
Algo 2 & Better
We only want to save content when the user adds content or when the user is active. So to achieve this, We intend to call the Save function when a new item is added to the development dashboard or after 10 active clicks
File/Files you will work on
dashboard.html if your code looks code, You can make another pull request for the ui_dashboard page
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
Projects will be saved automatically.
Most of the styles added in the dashboard to the HTML elements are done using inline CSS style. However, we need to convert all the Inline CSS style to embed CSS Style upon request by the user.
style="background-color: #de3423;"
CONVERT TO
<style> .something{ background-color: #de3423; } </style>Questions
Can you write some lines of code that can handle this action?
What if a style attribute is given but no class?
Step 1 - Create a Page called "inline_2_embedded.html "
Step 2 - Add 2 textarea HTML tags and a button
### Explanation
The first textarea will be used to receive the entire html code. The second textarea will be used to display the newly converted html content with no inline CSS style but embedded style. The button can be used by the user to initiate the conversion process.
### Algorithm
Algo 1
If we convert the text provided in the first textarea to an HTML Object, We can move from one element to another getting the attribute of style and if the attribute of style is not empty, we can provide a data-id or data-kwickerhub attribute that we can use to reference the element in our embedded sheet.
Algo 2
We can instead of using the first Algorithm, adopt a search, copy and replace technique. The goal will be to search for "style=" and copy the content between the quotation marks into our embedded style while replacing it with a data reference attribute. e.g:
<div data-kwickerhub="hasStyle1"></div>
Good-luck...
Follow the steps below:
Click the watch button above
Start 🌟 project above for easy reference
Fork and clone the project.
You can now add your name as a Contributor to this project in our aboutus.html file.
Make your pull request with the title - "Contributed to aboutus.html"
We forgot to call the function that displays the contribution to elements. So when the "contribution" menu in "dashboard.html" is clicked, the entire pop-up is still until you click another tab.
You task is to call the function that will display the contribution form for elements.
A full screen display of the things the dashboard has created that are gotten from the saved location of that project.
on the dashboard(dashboard.html) environment, when somebody wants to duplicate an element or module, He should not always go up to locate the "duplicate" command in the top menu. He/She can simply use the shortcut key:
ctrl + D = Duplicate
This will help manage users production time and it will also be fun.
@gideonakpan please feed on the backend API so that every functionality will be set and complete for the Register and Sign-in pages. Thank you.
The user interface of the dashboard needs more attention and better styling.
Anybody can contribute or come up with fresh ideas.
Describe the bug
Change the profile image in profilepage.html
File/Files you will work on
profilepage.html
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
You should have changed the default profile picture from the face of the woman to an anonymous general context profile image like the one below.
When the square-like-icon on the bottom tab of the page is clicked, we see clearly that a square is added to UI dashboard environment. Your goal is to activate the circle icon on the bottom of the page. So! Add a circle to the UI_development environment....
Add an icon to the "View Page" in the view section in the menu of the dashbaord.html.
You can add two icons(to the left and right) but make sure to include a redirect icon because we will be redirecting the user to the "View Page" html file in a new tab.
This is a really simple task. Enjoy it.
We have discovered that we have too many test pages on the "pages" folder.
So you Goal is to delete the following files:
feature_all_test.html
feature_tet.html
Make the Font Section Working.
Add an image Box or displayers
Enhance most of the features of the ui_dashboard to at least 70%
Some attributes and styles require some unique values and it will be better to use a drop down or a select box in the input filed.
add dropdown options in the form box so users can select options provided instead of typing
eg(display — block, inline, flex, grid options).
Describe the bug
Just like adding a square and circle, We need our users to be able to add images.
You will need to add an image or gallery icon on the bottom bar
When users click the added icon, a default image should always be added on screen
File/Files you will work on
ui_dashboard.html
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
Users should be able to add images to a default image to the ui_dashboard
Text with class ” each_item”
*For long text behind the box; set text_overflow to ellipses and on hover full text is displayed to user.
The_bottom_bar
When you close the side bars in the left or right side, An icon then appears by the side in situations when you want to restore the bar.
We want to change this icons to the caret left and right which look more professional.
We need to have a YouTube channel or a Contributor who can make meaningful videos on YouTube about our software and the different things that can be done with the software.
If you have a YouTube account or will love to manage our account, You are welcome..
Send us content you posted before on YouTube or a Channel you already own.
Most of your videos will be displayed to users and it will make up majority of our tutorial page.
Describe the bug
We also need some suggestion on the input box for size properties like border radius, width, font-size, height etc. All this properties only need some pixels, em, %, vh or vw
We can always make some global suggestions for the users. example (9px, 100%, 100vh, 20px, etc)
File/Files you will work on
dashboard.html
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
At the end of the day, your code should make it easier for people. When people click a size property, they should get some really good suggestions. HINT=Use HTML datalist tag
On the mobile view, we need to append an icon before the "Arts/Icons" menu option in the dashboard. This menu button when clicked will display the initial content of the menu that was hidden out for the mobile view. The Menu button when clicked should display the menu containing: file, edit, mode, view, help. and we should have a technique for closing the displayed items. And when we have a tablet screen or a desktop screen, We do not want to see the menu icon.
Describe the bug
When a user double clicks(or if a user clicks on the edit icon you add) on his/her Bio information in profilepage.html, a textarea HTML TAG should appear with a save button below it.
File/Files you will work on
profilepage.html
Possible Lines of Code
You should not add above the possible lines of code. (if given)
Result or Final Looks
Users should be able to change their bio from the default text to their desire.
The Search button and the Search bar are not working. We need them to change according to user input. Thank God for the "list" attribute that can now be appended with possible clues and suggestions.
To get the content to create the list, you may want to feed on the Back-end Repository of this organisation. icons/get_icons.php
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.