feat: add font-size and font weight changing feature

README.md

@@ -1,8 +1,10 @@
 # Wix-clone
-A react and nodejs based site that will allow user to create their own website  even if they don't know how to code
+
+A react and nodejs based site that will allow user to create their own website even if they don't know how to code
 
 **Prerequisites**
 
-* Node
-
-* Yarn
+- Node
+- Yarn
+
+This app is deployed at https://iiitv-wix-clone.netlify.app

client/.gitignore

@@ -4,7 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
-
+/.netlify
 # testing
 /coverage
 

client/README.md

@@ -1,4 +1,8 @@
-To install dependancies 
+# Wix-clone
+
+The app is deployed at https://iiitv-wix-clone.netlify.app
+
+To install dependancies
 
 ```
 yarn install

client/package.json

@@ -7,7 +7,6 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "element-resize-event": "^3.0.3",
-    "lodash": "^4.17.19",
     "node": "^14.2.0",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",

client/src/Components/BasicProperties.js

@@ -1,23 +1,26 @@
 import React, { useEffect, useState } from 'react';
-import { throttle } from 'lodash';
-
 const BasicProperties = ({
   updateSelectedElement,
   defaultText,
   selectedType,
   defaultBorderRadius,
+  defaultFontSize,
+  defaultFontWeight,
 }) => {
   const [text, setText] = useState(defaultText);
   const [textPicker, setTextPicker] = useState(false);
   const [backgroundPicker, setBackgroundPicker] = useState(false);
   const [borderRadius, setBorderRadius] = useState(defaultBorderRadius);
-
+  const [fontSize, setFontSize] = useState(defaultFontSize);
+  const [fontWeight, setFontWeight] = useState(defaultFontWeight);
   useEffect(() => {
     updateSelectedElement({
       text,
+      fontSize,
+      fontWeight,
       borderRadius: selectedType !== 'text' ? `${borderRadius}px` : '5px',
     });
-  }, [text, borderRadius]);
+  }, [text, borderRadius, fontSize, fontWeight]);
 
   return (
     <div
@@ -44,6 +47,24 @@ const BasicProperties = ({
           onChange={e => setText(e.target.value)}
         />
       </div>
+      <div className="properties__section">
+        <div className="properties__label">Font size</div>
+        <input
+          className="properties__textinput"
+          type="text"
+          defaultValue={defaultFontSize}
+          onChange={e => setFontSize(e.target.value)}
+        />
+      </div>
+      <div className="properties__section">
+        <div className="properties__label">Font weight</div>
+        <input
+          className="properties__textinput"
+          type="text"
+          defaultValue={defaultFontWeight}
+          onChange={e => setFontWeight(e.target.value)}
+        />
+      </div>
       <div className="properties__section">
         <div className="properties__label">Border Radius</div>
         <input

client/src/Components/Properties.js

@@ -9,9 +9,7 @@ const Properties = ({ selectedElement, updateElement, getElementFromId }) => {
   let id = selected.id;
   let element = selected.element;
 
-  useEffect(() => {
-    console.log('updated');
-  }, [selected.element.props.text]);
+  useEffect(() => {}, [selected.element.props.text]);
 
   useEffect(() => {
     document.querySelectorAll('.properties__tab').forEach(cur => {
@@ -41,7 +39,6 @@ const Properties = ({ selectedElement, updateElement, getElementFromId }) => {
       updateElement(id, updatedElement);
       setSelected({ id, element: updatedElement });
     }
-    console.log(getElementFromId(id));
   };
 
   return (
@@ -71,6 +68,8 @@ const Properties = ({ selectedElement, updateElement, getElementFromId }) => {
             defaultTextColor={selected.element.props.textColor}
             selectedType={selected.element.props.type}
             defaultBorderRadius={selected.element.props.borderRadius}
+            defaultFontSize={selected.element.props.fontSize}
+            defaultFontWeight={selected.element.props.fontWeight}
           />
         )}
         {tab === 'color' && (

client/src/elements/Button.js

@@ -1,7 +1,4 @@
-import React, { useState, useEffect } from 'react';
-import addResizeEvent from 'element-resize-event';
-import { throttle } from 'lodash';
-
+import React, { useState } from 'react';
 const Button = ({
   text,
   position,
@@ -11,6 +8,8 @@ const Button = ({
   setSelected,
   showContextMenu,
   backgroundColor,
+  fontSize,
+  fontWeight,
   textColor,
   borderRadius,
 }) => {
@@ -39,7 +38,14 @@ const Button = ({
 
   return (
     <button
-      style={{ ...styles, backgroundColor, color: textColor, borderRadius }}
+      style={{
+        ...styles,
+        backgroundColor,
+        color: textColor,
+        borderRadius,
+        fontSize,
+        fontWeight,
+      }}
       className="btn"
       draggable="true"
       onDrag={setCoordinates}

client/src/elements/Text.js

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
 
-const Button = ({
+const Text = ({
   text,
   position,
   height,
   width,
   id,
   setSelected,
   showContextMenu,
+  fontSize,
+  fontWeight,
   textColor,
   backgroundColor,
 }) => {
@@ -33,7 +35,13 @@ const Button = ({
 
   return (
     <span
-      style={{ ...styles, backgroundColor, color: textColor }}
+      style={{
+        ...styles,
+        backgroundColor,
+        color: textColor,
+        fontSize,
+        fontWeight,
+      }}
       className="text"
       draggable="true"
       onDrag={setCoordinates}
@@ -47,4 +55,4 @@ const Button = ({
   );
 };
 
-export default Button;
+export default Text;

client/src/layouts/App.js

@@ -30,7 +30,6 @@ export class App extends Component {
     let newArray = this.state.elements;
     let active = newArray.filter(cur => cur.id === id)[0];
     let index = newArray.indexOf(active);
-    console.log(active);
     newArray.splice(index, 1, { id, element });
     this.setState({
       elements: newArray,
@@ -40,14 +39,12 @@ export class App extends Component {
   setSelected = id => {
     let tempArr = this.state.elements;
     let active = tempArr.filter(cur => cur.id === id)[0];
-    console.log(active);
     let index = tempArr.indexOf(active);
     let element = tempArr[index];
     if (element) {
       this.setState({
         selected: element,
       });
-      console.log(element);
     } else {
       console.log('not selecting');
     }

client/src/layouts/Home.js

@@ -22,6 +22,8 @@ const Home = ({
       height: 'auto',
       width: 'auto',
       allowContextMenu: true,
+      fontSize: '24px',
+      fontWeight: '400',
       backgroundColor: '#ccc',
       textColor: '#000',
       borderRadius: '5px',
@@ -46,6 +48,8 @@ const Home = ({
       allowContextMenu: true,
       backgroundColor: 'transparent',
       textColor: '#000',
+      fontSize: '16px',
+      fontWeight: '400',
     };
 
     const textFunctions = {
@@ -80,7 +84,7 @@ const Home = ({
         onDrop={e => {
           e.preventDefault();
           let type = e.dataTransfer.getData('type');
-          console.log(e.clientX, e.clientY);
+          // console.log(e.clientX, e.clientY);
           let dropCoords = { x: e.clientX, y: e.clientY };
           if (type === 'button') {
             addButton(dropCoords);

client/src/logic/ElementCreators.js

@@ -55,6 +55,8 @@ export const createButton = (config, functions) => {
     width,
     allowContextMenu,
     selected,
+    fontSize,
+    fontWeight,
     backgroundColor,
     textColor,
     borderRadius,
@@ -95,6 +97,8 @@ export const createButton = (config, functions) => {
         selected={selected}
         backgroundColor={backgroundColor}
         textColor={textColor}
+        fontSize={fontSize}
+        fontWeight={fontWeight}
         borderRadius={borderRadius}
         type="button"
       />
@@ -113,6 +117,8 @@ export const createText = (config, functions) => {
     allowContextMenu,
     textColor,
     backgroundColor,
+    fontSize,
+    fontWeight,
   } = config;
 
   const {
@@ -146,6 +152,8 @@ export const createText = (config, functions) => {
         showContextMenu={showContextMenu}
         backgroundColor={backgroundColor}
         textColor={textColor}
+        fontSize={fontSize}
+        fontWeight={fontWeight}
         type="text"
       />
     ),